<template>
	<view class="index-info">
		<u-navbar title-color="#000" :isBack="true" back-icon-color="#000" height="60" title="信息公告"></u-navbar>
		<view class="body">
			<view class="header">
				<view class="left">
					<u-avatar :size="100" :src="detail.userUrl"></u-avatar>
					<view class="title">【{{detail.infoType|get_infoType}}】{{detail.infoTitle}}</view>
				</view>
				<view class="right">
					{{detail.infoTime}}
				</view>
			</view>
			<view class="content">
				<view class="text-info">
					{{detail.infoComm}}
				</view>
				<view class="imgs">
					<image class="img" :src="url" mode="aspectFill" v-for="url in detail.infoImgList"></image>
				</view>
			</view>
		</view>
		<mescroll-body :up="{empty:{use:false}}" @init="mescrollInit" :down="{use:false}" @up="upCallback" height="60%"
		 :bottom="100">
			<comm-list :comm="commList" :buserName="detail.userName"></comm-list>
		</mescroll-body>
		<!-- 评论输入弹出层 -->
		<chat-input ref="comm" @send-message="fnCommSend"></chat-input>

		<view class="tui-operation">
			<view class="tui-operation-left tui-col-7 tui-height-full tui-ptop-zero">
				<view class="tui-btn-comment" @tap="btnCmt">发表你的评论...</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-5">
				<view class="tui-operation-item icon-bdoy" hover-class="opcity" :hover-stay-time="150" @click="addPraise">
					<u-icon name="thumb-up" :color="detail.isFabulous?'#F2855E':'#000000'" size="50"></u-icon>
					<text class="info">{{detail.FabulousNum}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import commList from '../../components/comm-list.vue'
	import chatInput from '../../components/chatinput.vue';
	export default {
		components: {
			commList,
			chatInput
		},
		data() {
			return {
				infoId: 1,
				detail: {},
				commList: []
			};
		},
		onLoad(options) {
			if (options && options.infoId) {
				this.infoId = parseInt(options.infoId);
			}
		},
		methods: {
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(mescroll) {
				let params = {
					id: this.infoId,
					page: mescroll.num,
					limit: mescroll.size
				}
				if (mescroll.num == 1) {
					this.$api.infoDetail({
						infoId: this.infoId
					}).then(res => {
						if (res.code) {
							this.detail = res.data
						}
						return this.$api.getInfoComm(params)
					}).then(res => {
						if (res.code) {
							this.commList = res.data
							mescroll.endSuccess(res.data.length, res.data.length >= mescroll.size);
						}
					}).catch(() => {
						mescroll.endSuccess(0, false);
					})
				} else {
					this.$api.getInfoComm(params).then(res => {
						this.commList = this.commList.concat(res.data)
						mescroll.endSuccess(res.data.length, res.data.length >= mescroll.size);
					}).catch(() => {
						mescroll.endErr();
					})
				}
			},
			addPraise() {
				this.$api.addPraise({
					infoId: this.infoId
				}).then(res => {
					if (res.code) {
						this.$comm.successToShow(res.data.info, () => {
							this.detail.isFabulous = !this.detail.isFabulous
							this.detail.FabulousNum = this.detail.isFabulous ? this.detail.FabulousNum + 1 : this.detail.FabulousNum - 1;
						})
					}
				})
			},
			btnCmt() {
				this.fnCommOpen()
			},
			// 显示评论输入框
			fnCommOpen() {
				/**	
				 * type comm代表回复评论     card代表回复帖子
				 * id         帖子id
				 * buserid  回复人的id         不需要带上  
				 * cid  回复评论的id          不需要
				 * content :        评论内容
				 */
				this.$refs.comm.open({
					type: 'card',
					id: this.detail.id
				});
			},
			fnCommSend(e) {
				this.$api.addInfoComm({
					infoId: this.infoId,
					content: e.content
				}).then(res => {
					if (res.code) {
						this.$comm.successToShow(res.msg, () => {
							this.commList.push({
								infoCommId: 3,
								comm: e.content,
								time: this.$comm.timestampToTime(),
								userName: this.userInfo.userName,
								userUrl: this.userInfo.userUrl
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.icon-bdoy {
		display: flex;
		align-items: center;

		.info {
			margin-left: 6upx;
			vertical-align: bottom;
		}
	}

	.tui-operation-item {
		flex-direction: row !important;
	}

	.index-info {
		padding-top: 20upx;

		.body {
			margin: 0upx 30upx 25upx;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.title {
						margin-left: 20upx;
					}
				}

				.right {
					font-size: 24upx;
				}
			}

			.content {
				margin: 30upx 40upx;

				.text-info {
					line-height: 40upx;
					text-indent: 2em;
					font-size: 20upx;
				}

				.imgs {
					margin-top: 20upx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.img {
						width: 300upx;
						height: 300upx;
						border-radius: 10upx;
						margin-top: 10upx;
					}
				}
			}
		}
	}

	.tui-operation {
		width: 100%;
		height: 90rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}

	.tui-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding-top: 0;
	}

	.tui-badge-class {
		color: #5677fc !important;
		position: absolute;
		top: -6rpx;
		padding: 2px 4px !important;
		/* #ifdef H5 */
		transform: translateX(50%) scale(0.8);
		/* #endif */
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-btn-comment {
		height: 64rpx;
		width: 93%;
		background: #ededed;
		color: #999;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		margin-left: 30rpx;
	}

	.tui-col-7 {
		width: 80%;
	}

	.tui-col-5 {
		width: 20%;
	}

	.tui-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
	}
</style>
